<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
        a {
    color: #00bc9b;
}
    </style>
</head>

<body>
    <!-- 填写标签 -->
    <div id="jsContainer">
这里会给出一段随机文本，可能包含一些链接，比如https://www.baidu.com，或者 www.baidu.com?from=onlineExam，如果出现链接文本，请给该链接文本加上链接标签，用户点击后能直接在新窗口中打开该链接。
</div>
    <script type="text/javascript">
        // 填写JavaScript
/*
该DOM元素内会给出一段随机文本，可能包含一些链接，比如https://www.baidu.com，或者 www.baidu.com?from=onlineExam，如果出现链接文本，请给该链接文本加上链接标签，用户点击后能直接在新窗口中打开该链接。
完成link函数，完成该功能
1. container 只有纯文本内容
2. 识别所有以 http:// https:// 或者www.开始的链接
3. 所有www.开头的链接 默认使用http协议
4. 所有链接在新窗口打开
 */
function link() {
    const elm = document.querySelector('#jsContainer');  //选定dom对象
    // reg 正则表达式匹配URL
    // JS 语法规则：
    // 1. 字符描述： \w单词字符 d数字 s空白字符 b单词边界 0nul字符 f换页符 t制表符 xxx以八进制树xxx规定的字符 uxxx以十六进制数xxx规定的Unicode
    // 2. 字符范围： [abc]方括号间的任何字符 [^abc]任何不在方括号间的字符 [0-9][a-z][A-Z][A-z]
    // 3. 选择操作： | 标识在两个子模式的匹配中任选一个
    // 4. 重复类量词：n+任何包含至少一个n的字符串 n*任何包含零个或多个n的字符串 n?任何包含零个或一个n的字符串 n{x}包含x个n的序列的字符串 n{x,y}x个或y个n的序列的字符串 n{x,}至少x个n的序列的字符串
    // 5. 边界量词：确定匹配模式的位置，如字符串的头部或尾部
    // 6. 声明量词
    // 7. 表达式分组：
    // search检索与正则表达式匹配的值；match找到一个或多个正则表达式的匹配；replace替换与正则表达式匹配的子串；split把字符串分割为字符串数组
    let reg = /(https?:\/\/)?(www\.\w+(\.(com|cn))*([?]\w+=\w*(&\w+=\w*)*)?(#\w+)?)/g
    elm.innerHTML = elm.innerHTML.replace(reg, function(...args) {  // 匿名函数， 不定长参数
        if(args[1]) {
            return `<a target="_blank" href="${args[1]}${args[2]}">${args[0]}</a>`; // 模板字符串占位符填入参数
        } else {
            return `<a target="_blank" href="http://${args[2]}">${args[0]}</a>`;
        }
    })
}
    </script>
</body>

</html>